<template>
	<view class="container">
		<navbar :background="background" :bgSize='bgSize' color='#333333' title="员工"></navbar>
		<view class="bg">
			<image :src='hostUrl+"/static/img/staff.png"'>
			</image>
		</view>
		<view class="wrap">
			<view class="user-info-wrap">
				<view class="user-info">
					<view class="user-head">
						<image :src='teamInfo.user.u_avatar' v-if='teamInfo.user.u_avatar'></image>
						<image src='/static/user-head.png' v-else></image>
					</view>
					<view class="user-nick">{{teamInfo.user.u_nickname}}</view>
					<view class="staff-btn" @tap='toManager' v-if='teamInfo.user.identity == 1'>
						<image src='../img/staff-enter2.png'></image>
						经理
					</view>
				</view>
				<picker mode="date" :value="month" fields='month' @change="bindDateChange">
					<view class="shaixuan">
						筛选
						<image src='../img/shaixuan2.png'></image>
					</view>
				</picker>
			</view>
			<view class="invite-wrap" @tap='inviteFriends'>
				<image src='../img/invite-bg.png'></image>
			</view>
			<view class="total-wrap" v-if="pageType == 1">
				<view class="total-item">
					<view class="total-title">
						客户人数(人）
					</view>
					<view class="total-num">{{teamInfo.childNums}}</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						推广订单(单）
					</view>
					<view class="total-num">{{teamInfo.orderCount}}</view>
				</view>
				<view class="total-item" @tap='toDetail'>
					<view class="total-title">
						收益提成(元）
					</view>
					<view class="total-num">{{teamInfo.com}}</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						订单额度(元）
					</view>
					<view class="total-num">{{teamInfo.orderTotal }}</view>
				</view>
			</view>
			<view class="total-wrap" v-if="pageType == 2">
				<view class="total-item">
					<view class="total-title">
						团队人数(人）
					</view>
					<view class="total-num">{{teamInfo.childNums}}</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						团队订单数量(单）
					</view>
					<view class="total-num">{{teamInfo.orderCount}}</view>
				</view>
				<view class="total-item" @tap='toDetail'>
					<view class="total-title">
						推广收益(元）
					</view>
					<view class="total-num check">
						{{teamInfo.com}}
						<view class="cash-btn line_center" @tap='toCash'>提现</view>
					</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						推广业绩(元）
					</view>
					<view class="total-num">{{teamInfo.orderTotal }}</view>
				</view>
			</view>
			<view class="list-wrap" v-if='teamInfo.childInfo.length > 0'>
				<view class="list-item" v-for='(item,index) in teamInfo.childInfo' :key="index"
					@tap='toOrderDetail(item.user.u_id)'>
					<view class="user-top">
						<view class="head-img">
							<image :src='item.user.u_avatar' v-if='item.user.u_avatar'></image>
							<image src='/static/user-head.png' v-else></image>
						</view>
						<view class="user-info">
							<view class="user-nick">{{item.user.u_nickname}}</view>
							<view class="date">于 {{item.user.bind_time}} 加入</view>
						</view>
					</view>
					<view class="user-bottom-item">
						<view class="user-bottom-item-num">
							{{item.orderCount}}
						</view>
						<view class="user-bottom-item-t">订单数</view>
					</view>
					<view class="user-bottom-item">
						<view class="user-bottom-item-num">
							{{item.orderTotal}}
						</view>
						<view class="user-bottom-item-t">订单金额</view>
					</view>
					<uni-icons type="forward" size="16px"></uni-icons>
				</view>
			</view>
			<no-data text='暂无客户' v-else></no-data>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				background: `url(${app.globalData.hostUrl}/static/img/staff.png)`,
				bgSize: '100% 568rpx',
				month: '',
				teamInfo: {},
				showPage: false,
				pageType: 1, // 1 -- 默认员工中心   2 -- 新推广中心
			};
		},
		onLoad(option) {
			this.pageType = option.type ? option.type : 1;
			this.getTeam()
		},
		onPullDownRefresh() {
			this.teamInfo = {};
			this.getTeam();
			uni.stopPullDownRefresh()
		},
		methods: {
			getTeam() {
				const that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				app.globalRequest({
					api: app.getApi().user.myTeam,
					data: {
						month: that.month,
						pageType: 2,
					}
				}).then(res => {
					console.log('res', res)
					that.showPage = true;
					if (res.code == 0) {
						that.teamInfo = res.data;
					}
				}).catch(err => {

				})
			},
			bindDateChange(e) {
				console.log('e', e)
				this.month = e.detail.value;
				this.getTeam()
			},
			inviteFriends() {
				uni.navigateTo({
					url: '/pages/user/invite-code/invite-code'
				})
			},
			toManager() {
				uni.navigateTo({
					url: '/pages/user/manager/manager'
				})
			},
			toOrderDetail(uid) {
				uni.navigateTo({
					url: `/pages/user/order-details-list/order-details-list?u_id=${uid}&month=${this.month}`
				})
			},
			toDetail() {
				uni.navigateTo({
					url: `/pages/user/mange-detail/mange-detail?month=${this.month}&type=2`
				})
			},
			toCash(){
				uni.navigateTo({
					url: '/pages/user/withdraw-cash/withdraw-cash'
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}
</style>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.bg {
		width: 100%;
		height: 568rpx;
		position: absolute;
		left: 0;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrap {
		position: relative;
		padding: 0 24rpx;
	}

	.user-info-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 26rpx;

		.user-info {
			display: flex;
			align-items: center;
			color: #333;

			.user-head {
				width: 92rpx;
				height: 92rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-nick {
				max-width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.staff-btn {
				width: 128rpx;
				height: 40rpx;
				background: #FE6146;
				border-radius: 20rpx;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 10rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.shaixuan {
			display: flex;
			align-items: center;

			image {
				width: 25rpx;
				height: 25rpx;
			}
		}
	}

	.invite-wrap {
		width: 100%;
		height: 132rpx;
		margin-top: 26rpx;
	}

	.total-wrap {
		padding: 40rpx 24rpx 34rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 26rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 42rpx;
		column-gap: 20rpx;

		.total-title {
			color: #666;
			font-size: 24rpx;
		}
		.total-num {
			font-family: 'DIN-BOLD';
			margin-top: 18rpx;
			line-height: 32rpx;
			display: flex;
			align-items: center;
		}
		.check {
			color: #FE6146;
		}
		.cash-btn{
			width: 92rpx;
			height: 42rpx;
			background: #FE6146;
			border-radius: 20rpx;
			margin-left:32rpx;
			color:#fff;
			font-size: 24rpx;
		}
	}

	.list-wrap {
		padding: 0 24rpx;
		background: #fff;

		.list-item {
			margin-top: 24rpx;
			padding: 24rpx 0 18rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-top {
				display: flex;
				align-items: center;

				.head-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 100%;
					margin-right: 14rpx;
					overflow: hidden;
				}

				.date {
					font-size: 20rpx;
					color: #999999;
				}

				.user-info {
					flex: 1;
					overflow: hidden;

					.user-nick {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.user-bottom-item {
				text-align: center;
			}

			.user-bottom-item-num {
				font-family: 'DIN-BOLD';
				font-size: 28rpx;
				line-height: 30rpx;
			}

			.user-bottom-item-num2 {
				color: #F23525;

				text {
					font-size: 20rpx;
				}
			}

			.user-bottom-item-t {
				font-size: 24rpx;
				padding-top: 6rpx;
				color: #999999;
			}
		}
	}
</style>